import { Layout } from 'antd';
import MainLeftTree from './components/main-left-tree';
import MainTopMenu from './components/main-top-menu';
import Connection from './components/connection';
import Main from './components/main';
import SdkTags from './components/sdk-tags'

const { Header, Footer, Sider, Content } = Layout;
const css = {
    mh100: { minHeight: '100vh' },
    hbk: { backgroundColor: '#FCEEC5' },
    lbk: { backgroundColor: '#C2D8F1' },
    plr15: { padding: '0 15px' },
    pd5: { padding: '5px' }
};

export default function App() {
    return <Layout style={css.mh100}>
        <Header style={css.hbk}>
            <MainTopMenu />
        </Header>
        <Layout>
            <Sider theme="light" style={css.lbk}>
                <MainLeftTree />
            </Sider>
            <Content style={css.plr15}>
                <Connection />
                <SdkTags />
                <Main />
            </Content>
        </Layout>
        <Footer style={css.pd5}>Footer</Footer>
    </Layout>
}
